<template>
  <div>
    <h1>组件库 Demo</h1>
    <StatusTable
      class="status-table"
      :scroll="{ x: 300, y: 400 }"
      :results="results"
      :questions="questions"
      :tableOption="tableOption"
      style="width: 100%; height: 400px"
    >
      <template #modalContent="{ cellData }">
        <div>
          <h2>自定义模态框内容</h2>
          <p>这里可以放置任何HTML内容</p>
          <div v-if="cellData">
            <p>题目: {{ cellData.record.name }}</p>
            <p>学生: {{ cellData.student.name }}</p>
            <p>答题状态: {{ cellData.record[cellData.student.id] }}</p>
          </div>
          <a-button type="primary">自定义按钮</a-button>
        </div>
      </template>
    </StatusTable>
    <BarChart
      class="bar-chart"
      :option="chartOption"
      style="width: 100%; height: 500px"
    >
      <template #modalContent="{ chartData }">
        <div v-if="chartData && chartData.data">
          <p>用户列表:</p>
          <ul>
            <li v-for="user in chartData.data.users" :key="user">
              {{ user.name }}
            </li>
          </ul>
        </div>
      </template>
    </BarChart>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { StatusTable } from "../src";
import { BarChart } from "../src";

// ECharts柱状图配置选项
const chartOption = ref({
  title: {
    text: "答题统计",
  },
  tooltip: {},
  legend: {
    data: ["正确", "错误", "未作答"],
  },
  xAxis: {
    type: "category",
    data: ["题1", "题2", "题3", "题4"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "正确",
      type: "bar",
      stack: "Ad",
      barWidth: 30,
      data: [
        {
          value: 5,
          users: [
            { name: "张三", id: "1" },
            { name: "李四", id: "2" },
            { name: "王五", id: "2" },
          ],
        },
        5,
        5,
        5,
      ],
    },
    {
      name: "错误",
      type: "bar",
      stack: "Ad",
      barWidth: 30,
      data: [5, 5, 5, 5],
    },
    {
      name: "未作答",
      type: "bar",
      stack: "Ad",
      barWidth: 30,
      data: [5, 5, 5, 5],
    },
  ],
});

const results = computed(() => {
  const students = [] as any;
  const state = tableOption.value.legend.data.map((item) => item.value);

  for (let i = 1; i < 40; i++) {
    students.push({
      name: `学生${i}`,
      id: `${i}`,
      questions: [
        {
          name: "题1",
          judgement: {
            value: state[Math.floor(Math.random() * state.length)],
          },
        },
        {
          name: "题2",
          judgement: {
            value: state[Math.floor(Math.random() * state.length)],
          },
        },
        {
          name: "题3",
          judgement: {
            value: state[Math.floor(Math.random() * state.length)],
          },
        },
        {
          name: "题4",
          judgement: {
            value: state[Math.floor(Math.random() * state.length)],
          },
        },
      ],
    });
  }
  return students;
});

const questions = [
  {
    name: "题1",
    questionIndex: 0,
    correctsStudents: [
      {
        name: "学生1",
        id: "1",
      },
      {
        name: "学生2",
        id: "2",
      },
      {
        name: "学生3",
        id: "3",
      },
      {
        name: "学生4",
        id: "4",
      },
      {
        name: "学生5",
        id: "5",
      },
    ],
    wrongsStudents: [
      {
        name: "学生6",
        id: "6",
      },
      {
        name: "学生7",
        id: "7",
      },
      {
        name: "学生8",
        id: "8",
      },
      {
        name: "学生9",
        id: "9",
      },
      {
        name: "学生10",
        id: "10",
      },
    ],
    partialsStudents: [
      {
        name: "学生11",
        id: "11",
      },
      {
        name: "学生12",
        id: "12",
      },
      {
        name: "学生13",
        id: "13",
      },
      {
        name: "学生14",
        id: "14",
      },
      {
        name: "学生15",
        id: "15",
      },
    ],
    nonesStudents: [
      {
        name: "学生16",
        id: "16",
      },
      {
        name: "学生17",
        id: "17",
      },
      {
        name: "学生18",
        id: "18",
      },
      {
        name: "学生19",
        id: "19",
      },
      {
        name: "学生20",
        id: "20",
      },
    ],
  },
  {
    name: "题2",
    questionIndex: 1,
    correctsStudents: [
      {
        name: "学生1",
        id: "1",
      },
      {
        name: "学生2",
        id: "2",
      },
      {
        name: "学生3",
        id: "3",
      },
      {
        name: "学生4",
        id: "4",
      },
      {
        name: "学生5",
        id: "5",
      },
    ],
    wrongsStudents: [
      {
        name: "学生6",
        id: "6",
      },
      {
        name: "学生7",
        id: "7",
      },
      {
        name: "学生8",
        id: "8",
      },
      {
        name: "学生9",
        id: "9",
      },
      {
        name: "学生10",
        id: "10",
      },
    ],
    partialsStudents: [
      {
        name: "学生11",
        id: "11",
      },
      {
        name: "学生12",
        id: "12",
      },
      {
        name: "学生13",
        id: "13",
      },
      {
        name: "学生14",
        id: "14",
      },
      {
        name: "学生15",
        id: "15",
      },
    ],
    nonesStudents: [
      {
        name: "学生16",
        id: "16",
      },
      {
        name: "学生17",
        id: "17",
      },
      {
        name: "学生18",
        id: "18",
      },
      {
        name: "学生19",
        id: "19",
      },
      {
        name: "学生20",
        id: "20",
      },
    ],
  },
  {
    name: "题3",
    questionIndex: 2,
    correctsStudents: [
      {
        name: "学生1",
        id: "1",
      },
      {
        name: "学生2",
        id: "2",
      },
      {
        name: "学生3",
        id: "3",
      },
      {
        name: "学生4",
        id: "4",
      },
      {
        name: "学生5",
        id: "5",
      },
    ],
    wrongsStudents: [
      {
        name: "学生6",
        id: "6",
      },
      {
        name: "学生7",
        id: "7",
      },
      {
        name: "学生8",
        id: "8",
      },
      {
        name: "学生9",
        id: "9",
      },
      {
        name: "学生10",
        id: "10",
      },
    ],
    partialsStudents: [
      {
        name: "学生11",
        id: "11",
      },
      {
        name: "学生12",
        id: "12",
      },
      {
        name: "学生13",
        id: "13",
      },
      {
        name: "学生14",
        id: "14",
      },
      {
        name: "学生15",
        id: "15",
      },
    ],
    nonesStudents: [
      {
        name: "学生16",
        id: "16",
      },
      {
        name: "学生17",
        id: "17",
      },
      {
        name: "学生18",
        id: "18",
      },
      {
        name: "学生19",
        id: "19",
      },
      {
        name: "学生20",
        id: "20",
      },
    ],
  },
  {
    name: "题4",
    questionIndex: 3,
    correctsStudents: [
      {
        name: "学生1",
        id: "1",
      },
      {
        name: "学生2",
        id: "2",
      },
      {
        name: "学生3",
        id: "3",
      },
      {
        name: "学生4",
        id: "4",
      },
      {
        name: "学生5",
        id: "5",
      },
    ],
    wrongsStudents: [
      {
        name: "学生6",
        id: "6",
      },
      {
        name: "学生7",
        id: "7",
      },
      {
        name: "学生8",
        id: "8",
      },
      {
        name: "学生9",
        id: "9",
      },
      {
        name: "学生10",
        id: "10",
      },
    ],
    partialsStudents: [
      {
        name: "学生11",
        id: "11",
      },
      {
        name: "学生12",
        id: "12",
      },
      {
        name: "学生13",
        id: "13",
      },
      {
        name: "学生14",
        id: "14",
      },
      {
        name: "学生15",
        id: "15",
      },
    ],
    nonesStudents: [
      {
        name: "学生16",
        id: "16",
      },
      {
        name: "学生17",
        id: "17",
      },
      {
        name: "学生18",
        id: "18",
      },
      {
        name: "学生19",
        id: "19",
      },
      {
        name: "学生20",
        id: "20",
      },
    ],
  },
];

const tableOption = ref({
  legend: {
    data: [
        { name: "正确", value: "correct", color: "#42bd41" },
        { name: "错误", value: "wrong", color: "#ec407a" },
        { name: "未提交", value: "unsubmitted", color: "#bcc2c5" },
      ],
  },
});
</script>

<style scoped lang="less">
.status-table {
  border: 1px solid #000;
}

:deep(.ant-modal-content) {
  border-radius: 20px;
}
</style>
<style>
.ant-modal-header {
  background-color: #fff;
}
</style>
